<template>
  <div class="wapper">
    <el-container style="100%">
      <ProjectType @getPTypeId="getPTypeId"></ProjectType>
      <el-main style="background:#fff;margin-left:15px;">
        <div class="table-wrap">
          <div class="handle-box3">
            <el-form :inline="true" ref="form" class="demo-form-inline">
              <div class="uers-left">
                项目类型菜单权限
              </div>
              <div class="uers-right">
                <span class="btn-r">
                  <el-button type="primary" @click="addSubmit">保存</el-button>
                </span>
              </div>
            </el-form>
          </div>
          <div class="power_tab">
            <el-table
              :data="tableData"
              :height="tableHeight"
              row-key="authorizeId"
              border
              class="tab"
              default-expand-all
              :header-cell-style="{background:'#f2f6fc',color:'#606266'}"
              :tree-props="{children: 'children',hasChildren: 'hasChildren'}"
            >
              <el-table-column type="selection" width="55">
                <template slot-scope="scope">
                  <el-checkbox
                    v-model="scope.row.checked"
                    @change="checkChange(scope,scope.row.checked)"
                  ></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="名称"></el-table-column>
              <el-table-column prop="icon" label="页面"></el-table-column>
              <el-table-column prop="address" label="图标">
                <template slot-scope="scope">
                  <span :class="scope.row.icon"></span>
                </template>
              </el-table-column>
            </el-table></div>
          </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import ProjectType from "../../components/systemSetup/tree/ProjectType";
import bus from "../../components/common/bus.js";

export default {
  data() {
    return {
      tableHeight: window.innerHeight - 200,
      //控制数据操作权限按钮
      isselect: true,
      tableData: [],
      //单个角色权限
      roleData: {},
      ProjectTypeId:0
    };
  },
  created() {
    //获取所有权限
    this.$axios.get("/Authorize/Tree").then(res => {
      var dat = res.data.data;
      //给所有权限添加属性checked
      this.tableData = this.addchecked(dat);
    })
  },
  methods: {
    getPTypeId(id){
      this.ProjectTypeId = id;
      this.getData(id);
    },
    getData(id){
      this.$axios.get("/ProjectTypeAuthorize/ProjectType/"+id).then(res => {
          if (!res.data.hasError) {
            this.tableData.forEach((element) => {
                element.checked=false;
                this.handleCheckAll(element,false);
                res.data.data.forEach((e)=>{
                  if(element.authorizeId==e.authorizeId){
                    element.checked=true;
                  }
                  this.selectChecked(e.authorizeId,element);
                })
            });
        }
      })
    },
    selectChecked(id,element){
      if(element){
          if(id==element.authorizeId){
              element.checked=true;
          }
        if(element.children){
            element.children.forEach((e, i) => {
              this.selectChecked(id,e);
            });
        }
      }
    },
    //给所有权限添加属性checked
    addchecked(dat) {
      dat.forEach((element, i) => {
        element.checked = false;
        if (!!element.children) {
          this.addchecked(element.children);
        }
      });
      return dat;
    },
    //监听函数
    checkChange(scope, checked) {
      if (scope.row.children) {
        this.handleCheckAll(scope.row, scope.row.checked);
      }
      if (checked&&scope.row.parent_Id) {
        //遍历所有父属性
        this.tableData.forEach((element, i) => {
          if (element.authorizeId == scope.row.parent_Id) {
            this.getParent(element, scope.row.authorizeId, scope.row.checked);
          }
        });
      }
    },
    //单点功能
    getParent(parent, id, checked) {
      //遍历每个子节点
      let mun = 0;
      if (checked) {
        parent.children.forEach((element, i) => {
          if (!!element.checked === checked) {
            mun++;
          }
        });
        if (mun == parent.children.length) {
          parent.checked = checked;
        }
      } else {
        parent.checked = checked;
      }
    },
    //全选功能
    handleCheckAll(row, checked) {
      row.children.forEach((element, i) => {
        element.checked = checked;
        if(row.children){
          this.handleCheckAll(element, checked)
        }
      });
    },
    addSubmit() {
      if(this.ProjectTypeId==0||this.ProjectTypeId=="0"){
          this.$message({
              type: "error",
              message: "请选择项目类型？"
            })
      }else{
        //遍历功能菜单权限
        var arr = [];
        this.getpower_id(this.tableData, arr);
        
        this.$axios.put("/ProjectTypeAuthorize/"+this.ProjectTypeId, arr).then(res => {
          if (!res.data.hasError) {
            this.$message({
              type: "success",
              message: "数据保存成功!"
            });
          }
        });
      }
    },
    //获取权限authorize_id数组
    getpower_id(obj, arr) {
      obj.forEach((element, i) => {
        if (!!element.checked) {
          arr.push({"authorizeId":element.authorizeId});
        }
        if (!!element.children) {
          this.getpower_id(element.children, arr);
        }
      });
    },
    //展示权限
    openpower(val) {
      let arr = this.roleData.authorize_Id;
      this.tableData.forEach((element, i) => {
        if (arr.includes(element.authorize_Id)) {
          element.checked = true;
        } else {
          element.checked = false;
        }
        if (!!element.children) {
          element.children.forEach(ele => {
            if (arr.includes(ele.authorize_Id)) {
              ele.checked = true;
            } else {
              ele.checked = false;
            }
          });
        }
      });
    }
  },
  components: {
    ProjectType
  }
};
</script>
<style lang="scss" scope>
.handle-box3{
  height: 50px;
}
.table-wrap {
  margin-left: 10px;
  height: 100%;
}
.el-main{
  border-radius: 5px;
  position: relative;
}
.uers-left {
  float: left;
}
.uers-right {
  float: right;
}
.power_tab{
  height: calc(100% -100px);
  box-sizing: border-box;
  overflow: auto;
  .has-gutter {
    /deep/.el-checkbox {
      display: none;
    }
  }
}
</style>